﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LocationPage.aspx.cs" Inherits="OpenWaves.EPiServer.GeoProperties.LocationPage"
    MasterPageFile="/App_Resource/OpenWaves.EPiServer.GeoProperties/OpenWaves.EPiServer.GeoProperties.EPiServerUI.Master" %>

<%@ Import Namespace="System.Globalization" %>
<%@ Register TagPrefix="EPiServerUI" Namespace="EPiServer.UI.WebControls" Assembly="EPiServer.UI" %>
<asp:Content ContentPlaceHolderID="HeaderContentRegion" runat="server">
    <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js" type="text/javascript"></script>    
    <style type="text/css">
        .epitoolbuttonrowrightaligned {
            display: none;
        }

        form {
            margin: 0 10px;
        }

        label 
        {
            color: rgb(85, 85, 85);
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 13px;
        }
        
        .row {
            width: 100%;
            position: relative;
            margin: 0 0 10px 0;
        }
            
        input[type=text] {
            height: 30px;
            padding: 0 5px 0 5px;
            border: 1px solid rgb(146, 155, 164);
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            -o-border-radius: 4px;
            border-radius: 4px;                      
        }    
        
        input[type=button] {
            height: 24px;
            border-radius: 3px;
            padding: 2px 4px;
            border: 1px solid #768388;
            background: #e4e4e4;
        }
        
        .control-group {
            float: left;
            margin: 0 10px 0 0;
        }
        
        .control-group label {
            display: block;
            margin: 0 0 2px 0;
        }

        .control-group input {
            display: block;
        }


        .search-row {
            display: table;
        }        
        
        .search-row > div {
            display: table-cell;
            padding: 0 15px 0 0;
        }

        .search-row > div:last-child {
            padding: 0 0 0 0;
        }
        
        .search-row .search-button-cell {
            width: 100px;
        }
        
        .search-row input {
            width: 100%;    
        }
        
        #buttonSearch {
            
        }
        
        .map {
            width: 100%;
            height: 400px;
        }
                
    </style>
</asp:Content>
<asp:Content ContentPlaceHolderID="FullRegion" runat="server">
    
    <asp:ScriptManager runat="server"></asp:ScriptManager>

    <div class="row search-row">
        <div>
            <input id="inputSearch" type="text" placeholder='<%: this.Translate("inputSearchText") %>'/>
        </div>
        <div class="search-button-cell">
            <input type="button" id="buttonSearch" value='<%: this.Translate("searchText") %>' />
        </div>
    </div>

    <div id="googlemap" class="map row">
    </div>    
    
    <div class="row">
        <div class="control-group">
            <label for="inputLatitude"><%: this.Translate("latitudeText") %></label>
            <input id="inputLatitude" type="text" class="number"/>
        </div>
        <div class="control-group">
            <label for="inputLongitude"><%: this.Translate("longitudeText") %></label>
            <input id="inputLongitude" type="text" class="number"/>
        </div>
        <div class="control-group" runat="server" Visible="<%# this.IsZoomVisible %>">
            <label for="inputZoom"><%: this.Translate("zoomText") %></label>
            <input id="inputZoom" type="text" readonly="true"/>
        </div>
    </div>
    <div class="epitoolbuttonrowrightaligned" runat="server">
        <EPiServerUI:ToolButton ID="InsertButton" IsDialogButton="True" OnClientClick="onOkButtonClick(this); return false;"
            GeneratesPostBack="false" SkinID="Save" Text="<%$ Resources: EPiServer, button.ok %>"
            ToolTip="<%$ Resources: EPiServer, button.ok %>" runat="server" />
        <EPiServerUI:ToolButton ID="CancelButton" IsDialogButton="True" OnClientClick="ToolButtonClick(null)"
            GeneratesPostBack="false" SkinID="Cancel" Text="<%$ Resources: EPiServer, button.cancel %>"
            ToolTip="<%$ Resources: EPiServer, button.cancel %>" runat="server" />
        <EPiServerUI:ToolButton ID="ClearButton" IsDialogButton="True" OnClientClick="ToolButtonClick({closeAction:'clear', marker:null})"
            GeneratesPostBack="false" Text="<%$ Resources: EPiServer, button.clear %>" ToolTip="<%$ Resources: EPiServer, button.clear %>"
            runat="server" />
    </div>

    <script type="text/javascript">

        function ToolButtonClick(returnValue) {
            EPi.GetDialog().Close(returnValue);
        }

        var geoPicker;
        $(function () {
            geoPicker = new GeoPicker({
                     mapContainerId: "googlemap", 
                     okButtonId: "okButton", 
                     cancelButtonId: "cancelButton", 
                     searchButtonId: "buttonSearch", 
                     searchTextBoxId: "inputSearch", 
                     latTextBoxId: "inputLatitude", 
                     lngTextBoxId: "inputLongitude",
                     zoomTextBoxId: "inputZoom"
                },
                { 
                    address: "",
                    geoPoint: '<%= Request.QueryString["geoPoint"] %>'
                }
            );
        });

        function onOkButtonClick() {
            var result = {
                closeAction: "insert",
                marker: {
                    longitude: geoPicker.marker.position.lng(),
                    latitude: geoPicker.marker.position.lat(),
                    mapZoom: geoPicker.map.getZoom()
                }
            };

            ToolButtonClick(result);
        }

        $(document).ready(function() {
            $("#inputLatitude").change(function() {                
                geoPicker.gotoLocation(new google.maps.LatLng(this.value, $("#inputLongitude").val()));
            });
            
            $("#inputLongitude").change(function() {                
                geoPicker.gotoLocation(new google.maps.LatLng($("#inputLatitude").val(), this.value));
            });

            $.extend($.validator.messages, { number: '<%: this.Translate("invalidNumberText") %>' });

            $("#" + '<%= this.Form.ClientID %>').validate();
        });
    
    </script>
</asp:Content>
